<template>
  <div >
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar :title="searchModel.buName" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="display: flex;">
      <div style="flex:1;">
        <nut-searchbar placeholder="关键字搜索"
                       @search="search"
                       @change="search"
                       @clear="clear"
                       v-model="searchModel.keyWord"
        >
          <template #leftin>
            <Search2 />
          </template>
          <template #rightout>
            <div style="padding-top:5px;">
              <nut-space>
                <Search2 @click="search"></Search2>
                <Scan2 style="margin-left:20px;" @click="scan"></Scan2>
              </nut-space>
            </div>
          </template>
        </nut-searchbar>
      </div>
    </div>
    <div style="display: flex;padding-left: 2px;">
      <div :style="{height: height+'px'}" style="overflow:auto;">
        <div  style="width: 80px;background-color:#fff;height:calc(100vh - 130px);">
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId===null?'active':'']"
              @click="choseCat(null)">
            <div class="line">
              全部
            </div>
          </div>
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId==='near'?'active':'']"
              @click="choseCat('near')">
            <div class="line">
              最近购买
            </div>
          </div>
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId===item.id?'active':'']"
              v-for="(item,index) in state.catList" :key="index" @click="choseCat(item.id)"
          >
            <div class="line">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
      <div  style="flex:1;padding-right: 5px;overflow:auto;" :style="{height: height+'px'}"  >
        <fresh-load @action="action" url="app/getGoodList" ref="freshRef" :search-model="searchModel">
          <div class="item" v-for="(item,index) in state.list" :key="index" @click="altGood(item)">
            <div class="name">{{ item.name }}</div>
            <div class="link">
              <div style="flex:1;">规格：1 * {{ item.spec }}</div>
              <div  style="flex:1;">单位：{{ item.unit1 }}</div>
              <div  style="flex:1;">
                库存：{{item.leftQty}}
              </div>
            </div>
            <div style="display: flex;">
              <div class="address"  style="flex:1;">单价：
                <span style="color: #1e9fff;">{{ item.price }}</span>
                <span style="margin-left: 50px;font-size: 14px;color: #8a8f97;">
                 {{item.send}}
              </span>
              </div>
            </div>
          </div>
        </fresh-load>
      </div>
      <altgood :buId="searchModel.buId" ref="addRef" @addSuc="addSuc" />
    </div>

    <cart ref="cartRef" :buId="searchModel.buId" :buName="searchModel.buName" :billId="state.billId" />
  </div>
</template>
<script setup>
// 零售
import bus from "@/utils/bus";
import cart from './cart/cart.vue'
import altgood from './cart/altgood.vue'
import {useGlobal} from "@/stores/useGlobal";
import { Scan2, Search2 } from '@nutui/icons-vue';
import {computed, onActivated, onBeforeMount, onMounted, onUnmounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import FreshLoad from "@/components/freshLoad.vue";
import tool from "@/utils/tool.js";
const route = useRoute()
const router = useRouter()
const global = useGlobal()

const state = reactive({
  billId: null,
  list: [],
  active: 0,
  catList: [],
})
const searchModel = reactive({
  keyWord: '', goodCatId: null, buId: '', buName: '',
})

const addRef = ref(null)
const freshRef = ref(null)
const cartRef = ref(null)
onBeforeMount(() => {
  getGoodCat()
  searchModel.buId = route.query.buId
  state.buName = route.query.buName
  state.billId = route.query.billId
})
const height = computed(() => {
  return window.innerHeight - 130
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
onMounted(() => {
  bus.$on('scan-bar', scanRet)
})
onUnmounted(() => {
  bus.$off('scan-bar', scanRet)
})

const clickLeft = () => {
  router.go(-1)
}

const clear = () => { search('')}

const scan = () => {
  if(typeof uni !== 'undefined') {
    // eslint-disable-next-line no-undef
    uni.postMessage({
      data: {
        type: 'scan'
      }
    })
  }
}
onActivated(() => {
  searchModel.goodCatId = 'near'
})
const action = (arr) => {
  state.list = arr
}
const choseCat = (id) => {
  searchModel.goodCatId = id
  getList()
}
const getGoodCat = () => {
  tool.post('app/getGoodCat').then(ret => {
    if(ret.stat) {
      state.catList = ret.data
    }
  })
}
const scanRet = (code) => {
  if(code) {
    state.active = 0
    searchModel.goodCatId = null
    tool.post('app/getGoodByBar', {code: code}, true).then(ret => {
      state.list = ret.data.list
    })
  }
}
const search = (value, isQuick = false) => {
  state.active = 0
  searchModel.goodCatId = null
  getList()
}
const getList = () => {
   freshRef.value.getList()
}
const altGood = (goods) => {
  addRef.value.openDia(goods)
}
const addSuc = () => {
  cartRef.value.updateTotal()
}

</script>

<style scoped lang="scss">
.active {
  background-color:rgba(0,0,0,0.05);
  .line {
    border-left:3px solid red;
  }
}
.item {
  margin:7px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  &:active {
    background-color:rgba(0,0,0,0.05);
  }
  .name {
    font-size: 15px;
    font-weight: 500;
    color: #6b6d71;
  }
  .link {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #8a8f97;
    display: flex;
  }
  .address {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
  }
  .send {
    padding-top: 5px;
    margin-left: 100px;
  }
}


</style>